package com.langcollab.languagementor.component.skin
{
    import com.brightworks.util.Utils_HTML;
    import com.langcollab.languagementor.component.CreditsBox;

    import flash.text.AntiAliasType;
    import flash.text.GridFitType;
    import flash.text.TextFieldAutoSize;

    import spark.components.supportClasses.StyleableTextField;
    import spark.skins.mobile.supportClasses.MobileSkin;

    public class CreditsBoxSkin extends MobileSkin
    {
        public var creditsLink:StyleableTextField;

        public var hostComponent:CreditsBox;

        public function CreditsBoxSkin()
        {
            super();
        }

        override protected function createChildren():void
        {
            super.createChildren();
            creditsLink = StyleableTextField(createInFontContext(StyleableTextField));
            creditsLink.setStyle("textDecoration", "underline");
            creditsLink.setStyle("fontSize", 14);
            creditsLink.setStyle("color", 0x5c2a83);
            // StyleableTextField breaks if the next 2 lines aren't here
            creditsLink.setStyle("fontAntiAliasType", AntiAliasType.NORMAL);
            creditsLink.setStyle("fontGridFitType",GridFitType.PIXEL);
            // I can't get the ".styleSheet = " approach to work here...
            //creditsLink.styleSheet = Utils_HTML.getHTMLStyleSheet();
            creditsLink.commitStyles();
            creditsLink.autoSize = TextFieldAutoSize.CENTER;
            // dmccarroll 20110530
            // The next two lines don't work, so we deal with centering creditsLink
            // in layoutContents();
            // creditsLink.horizontalCenter = 0;
            // creditsLink.verticalCenter = 0;
            addChild(creditsLink);

        }

        override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.layoutContents(unscaledWidth, unscaledHeight);
            // dmccarroll 20110530
            // Note the "Math.abs". This layoutContents() method gets called twice 
            // at startup. The second time, creditLine.width is -80 when the control
            // actually wants to report that it is 80 pixels wide.
            var newX:uint = (this.width - Math.abs(creditsLink.width)) / 2;
            var newY:uint = (this.height - creditsLink.height) / 2;
            setElementPosition(creditsLink, newX, newY);
        }
    }
}

